<template>
  <div class="login">
    <div class="back"><span class="el-icon-arrow-left" @click="back"></span><span @click="back">返回</span></div>
    <img src="../assets/images/log.png" />
    <div class="login-form">
      <!-- rules：表单验证规则 -->
      <el-form :rules="rules" :model="form">
        <!-- prop：表单域 model 字段  用于使用验证规则-->
        <el-form-item label="账号:" prop="username">
          <!-- v-model：绑定的表单数据对象属性 -->
          <el-input v-model="form.username" name="username" id="username"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input type="password" v-model="form.password" name="password" id="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="submit" class="denglu" @click="login(form)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="login-btm">
      <p>
        <span @click="forget">忘记密码</span>
        <span>
          <a href="#/signIn">新用户注册</a>
        </span>
      </p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { pattern: /^\w{5,12}$/, message: "账号不符合规则" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern: /^\w{6,16}$/, message: "密码不符合规则" },
        ],
      },
    };
  },
  methods: {
    forget(){
      location.href="#/password"
    },
    // 返回上一级
    back(){
      history.go(-1)
    },
    login(value) {
      //获取用户输入数据
      let $username = document.getElementById("username").value;
      let $password = document.getElementById("password").value;
      //去空格
      let username = $username.trim();
      let password = $password.trim();
      //发送登录请求
      axios
        .get("/login?username=" + username + "&password=" + password)
        .then((val) => {
          if (val.data.code) {
            // 登陆成功
            this.$store.commit("user", username);
            this.$store.commit("isOnline");
            this.$store.commit("userId",val.data.id)
            this.$message({
              message: val.data.msg,
              type: "success",
              duration:1000
            });
            history.go(-1);
          } else {
            this.$message({
              message: val.data.msg,
              type: "error",
              duration:1000
            });
          }
        });
    },
  },
};
</script>


<style scoped>
/* log图片 */
.login img {
  margin-bottom:20px;
  width: 80%;
}
/* 返回键 */
.back{
  line-height: 50px;
  color: #fff;
  width: 100%;
  background-color: deeppink;
  opacity: .7;
  font-size: 20px;
  display: flex;
}
.back span:first-child{
  font-size: 50px;
}
/* 设置组件样式 （样式穿透） */
.login >>> .el-form-item {
  margin: 0;
  height: 60px;
}
.login >>> .el-form-item .el-form-item__label {
  float: left;
  width: 25%;
  font-size: 18px;
  text-align: right;
  padding-top: 5px;
}
.login >>> .el-form-item .el-form-item__content {
  float: right;
  width: 70%;
  height: 30px;
  margin-right: 5%;
}
.login >>> .el-form-item .el-form-item__content .el-form-item__error {
  top: 40px;
  left: 20px;
}

.login >>> .el-form-item .el-form-item__content .el-input__inner {
  border-top: transparent;
  border-left: transparent;
  border-radius: 0;
  height: 30px;
  width: 90%;
  border-right: transparent;
  font-size: 18px;
  padding-top: 0;
}
.login .denglu {
  width: 80%;
  margin-right: 20%;
  background-image: linear-gradient(90deg, #ff4aae, #ff1268);
  color: white;
  font-size: 18px;
  border: none;
}

.login .login-btm p span {
  display: inline-block;
  width: 50%;
  padding-top: 5px;
  font-size: 14px;
  color: #757575;
}
.login .login-btm p span a {
  color: #757575;
}
</style>

